require('./PageSelectstudent.styl');
import { Scroller, Boxs, NavBar, Toast, CheckboxField } from 'saltui';
import CheckRound from 'salt-icon/lib/CheckRound';
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
import { Control } from 'react-keeper'
const { HBox, Box, VBox } = Boxs;
const classNames = require("classnames")
class Selectstudent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            listData: [],
            top_select: false,//全选
            selectData: []//选中的人员
        };
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this);
        this.clickIcon = this.clickIcon.bind(this);
        this.getCheckboxFieldProps = this.getCheckboxFieldProps.bind(this)
    }
    handleOnLeftClick() {
        this.props.handleClickVisible && this.props.handleClickVisible();
    }
    handleOnRightClick() {
        let t = this;
        Actions.changeData(t.state.selectData, this.props.classId)
        this.props.handleClickVisible && this.props.handleClickVisible(t.state.selectData);
    }
    //列表项icon点击
    clickIcon(e) {
        let t = this;
        e.stopPropagation()
        this.setState({ top_select: !this.state.top_select }, () => {
            //1.全选2.取消全选
            Actions.changeData([], this.props.classId, this.state.top_select ? 1 : 2)
        })
    }
    getCheckboxFieldProps() {
        let t = this;
        return {
            readOnly: false,
            placeholder: '请选择',
            maskCloseable: true,
            groupListFlag: true,
            onChange(data) {
                t.state.selectData = data;
                if (t.state.top_select) {
                    if (t.state.listData.length != t.state.selectData.length) {
                        t.setState({ top_select: false })
                    }
                } else {
                    if (t.state.listData.length == t.state.selectData.length) {
                        t.setState({ top_select: true })
                    }
                }
            },
            label: '',
            mode: 'list',
            required: true,
            tip: null,
        };
    }
    render() {
        let t = this;
        const CheckboxFieldProps = this.getCheckboxFieldProps();
        return (
            <div className="selectstudent">
                <NavBar
                    className={classNames({"ios-nav-bar":window.isIphone})}
                    isShow={false}
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={this.handleOnRightClick}
                    rightText="确定"
                    title="选择发布学生"
                    ref="navBar"
                />
                <HBox vAlign="center" hAlign="center" className="t-LH44 t-PL10 t-PR16" >
                    <Box flex={1} >{this.props.memberName}</Box>
                    <Box flex={1} className="t-FAR">
                        {!this.state.top_select ? 
                        <div className="round" onClick={this.clickIcon}></div> :
                            <CheckRound fill={ "#53CAC3"} width={24} height={24} onClick={this.clickIcon} />
                        }
                    </Box>
                </HBox>
                <Scroller ref="Scroller" className="container">
                    <CheckboxField {...CheckboxFieldProps} iconPosition="right" data={t.state.listData} />
                </Scroller>


            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetch({ classId: this.props.classId });
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Selectstudent, Reflux.connect(Store));

module.exports = Selectstudent;
